<script lang="jsx" setup>
import { onUnmounted, watch } from 'vue';
import { useNow, useWindowSize } from '@vueuse/core';
import dayjs from 'dayjs';
import VideoPlayer from '@/components/common/video.vue';
import LeftTop from './modules/left-top.vue';
import LeftBottom from './modules/left-bottom.vue';
import CenterTop from './modules/center-top.vue';
import CenterCenter from './modules/center-center.vue';
import CenterButtom from './modules/center-buttom.vue';
import RightTop from './modules/right-top.vue';
import RightCenter from './modules/right-center.vue';

const { width } = useWindowSize();
const now = useNow();

watch(
  width,
  val => {
    console.log(val);
    const size = `${val / 20}px`;
    handleSetFontSize(size);
  },
  {
    immediate: true
  }
);

function handleSetFontSize(size) {
  const html = document.getElementsByTagName('html')[0];
  html.style.fontSize = size;
}

onUnmounted(() => {
  handleSetFontSize('');
});
</script>

<template>
  <div class="intelligent-center-page">
    <div class="head">
      <h1 class="title">
        <span class="text">金禄科技智能化中心</span>
      </h1>
      <div class="time">{{ dayjs(now).format('YYYY/MM/DD HH:mm:ss') }}</div>
    </div>
    <div class="main">
      <div class="left main-item">
        <div class="top-box boxall">
          <div class="alltitle">标题</div>
          <div class="chart">
            <LeftTop />
          </div>
        </div>
        <div class="bottom-box boxall">
          <div class="alltitle">标题</div>
          <div class="chart">
            <LeftBottom />
          </div>
        </div>
      </div>
      <div class="center main-item">
        <div class="top-box boxall">
          <CenterTop />
        </div>
        <div class="center-box boxall">
          <div class="alltitle">标题</div>
          <div class="chart">
            <CenterCenter />
          </div>
        </div>
        <div class="bottom-box boxall">
          <div class="alltitle">标题</div>
          <div class="chart">
            <CenterButtom />
          </div>
        </div>
      </div>
      <div class="right main-item">
        <div class="top-box boxall calc-height">
          <div class="alltitle">标题</div>
          <div class="chart">
            <RightTop />
          </div>
        </div>
        <div class="center-box boxall calc-height">
          <div class="alltitle">标题</div>
          <div class="chart">
            <RightCenter />
          </div>
        </div>
        <div class="bottom-box boxall calc-height">
          <div class="alltitle">打码视频监控</div>
          <div class="chart flex">
            <div class="h-full w-50% border-r">
              <!-- <VideoPlayer url="192.168.175.66" username="admin" password="admin666888"></VideoPlayer> -->
              <VideoPlayer url="119.36.187.181:1668" username="admin" password="admin666888" :subtype="1"></VideoPlayer>
            </div>
            <div class="h-full w-50%">
              <VideoPlayer url="119.36.187.181:1669" username="admin" password="admin666888" :subtype="1"></VideoPlayer>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.intelligent-center-page {
  width: 100%;
  height: 100%;
  // background: url('@/assets/imgs/visualization-center/intelligent-center/bg.jpg');
  .head {
    position: relative;
    height: 1.05rem;
    // background: url('@/assets/imgs/visualization-center/intelligent-center/head_bg.png') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    .title {
      color: #fff;
      text-align: center;
      font-size: 0.4rem;
      line-height: 0.8rem;
      letter-spacing: -1px;
      .text {
        text-decoration: none;
        color: #399bff;
        font-weight: bold;
      }
    }
    .time {
      position: absolute;
      right: 0.15rem;
      top: 0;
      line-height: 0.75rem;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.3rem;
      padding-right: 0.1rem;
      font-family: electronicFont;
    }
  }
  .main {
    padding: 0 0.1rem 0rem 0.1rem;
    // padding: 0;
    height: calc(100% - 1.05rem);
    display: flex;
    .main-item {
      padding: 0 0.1rem;
      height: 100%;
      width: 30%;

      .boxall {
        padding: 0 0.2rem 0.2rem 0.2rem;
        background: rgba(6, 48, 109, 0.5);
        position: relative;
        margin-bottom: 0.15rem;
        z-index: 10;
        .alltitle {
          font-size: 0.2rem;
          color: #fff;
          line-height: 0.5rem;
          position: relative;
          padding-left: 0.15rem;
          &::before {
            position: absolute;
            height: 0.2rem;
            width: 4px;
            background: #49bcf7;
            border-radius: 5px;
            content: '';
            left: 0;
            top: 50%;
            margin-top: -0.1rem;
          }
        }
        .chart {
          height: calc(100% - 0.5rem);
        }
      }
      &.left {
        .top-box {
          height: calc(58% - 0.15rem);
        }
        .bottom-box {
          height: calc(42% - 0.15rem);
        }
      }
      &.center {
        width: 40%;
        .top-box {
          height: calc(20% - 0.15rem);
        }
        .center-box {
          height: calc(38% - 0.15rem);
        }
        .bottom-box {
          height: calc(42% - 0.15rem);
        }
      }

      &.right {
        width: 40%;
        .calc-height {
          height: calc(33.333% - 0.15rem);
        }
      }
    }
  }
}
</style>
